<template>
  <div class="base-info lg:mt-4">
    <div class="box-row flexbox flex-center flex flex-nowrap">
      <nuxt-link :to="localePath('/contact-us')" class="name hover:text-red-600 hover:underline hover:underline-offset-4 capitalize">
        {{ $t('bottomItem.contact') }}
      </nuxt-link>
      <div class="line"></div>
      <nuxt-link :to="localePath('/article/terms-of-use')" class="name hover:text-red-600 hover:underline hover:underline-offset-4 capitalize">
        {{ $t('bottomItem.services') }}
      </nuxt-link>
      <div class="line"></div>
      <nuxt-link :to="localePath('/support')" class="name hover:text-red-600 hover:underline hover:underline-offset-4 capitalize">
        {{ $t('bottomItem.problem') }}
      </nuxt-link>
      <div class="line"></div>
      <nuxt-link :to="localePath('/feedback')" class="name hover:text-red-600 hover:underline hover:underline-offset-4 capitalize">
        {{ $t('bottomItem.feedback') }}
      </nuxt-link>
    </div>
    <div class="year-area" v-if="showBeian">
      <nuxt-link class="link" :to="initData.beian_url || '#'">
        {{ initData.beian || '' }}
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showBeian: {
        type: Boolean,
        default: false
      }
    },
    data: function () {
      return {}
    },
    computed: {
      initData() {
        return this.$store.state.initData.initData || {}
      }
    },
    created() {},
    methods: {
      golink() {
        // if(process.client){
        //   window.open('https://beian.miit.gov.cn/#/Integrated/index')
        // }
      },
      goPathDetail(item) {
        let p = this.localePath(item)
        return p
      }
    }
  }
</script>
<style lang="less" scoped>
  .base-info {
    // margin-top: 20px;
    padding: 8px 0;
    .box-row {
      box-sizing: border-box;
      width: 1200px;
      margin: 0 auto;
      .name {
        font-size: 12px;
        // color: @font-color-99;
        cursor: pointer;
      }
      //.name:hover{
      //   color: @theme-color;
      //}
      .line {
        width: 1px;
        height: 10px;
        margin: 0 28px;
        background: #cccccc;
      }
    }
    .year-area {
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .base-info {
      // margin-top: 90px;
      padding: 8px 0;
      .box-row {
        box-sizing: border-box;
        width: 768px;
        margin: 0 auto;
        .name {
          font-size: 12px;
          color: @font-color-99;
          cursor: pointer;
        }
        // .name:hover {
        //   color: @theme-color;
        // }
        .line {
          width: 1px;
          height: 10px;
          margin: 0 28px;
          background: #cccccc;
        }
      }
      .year-area {
        display: none;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .base-info {
      // margin-top: 20px; //133
      .box-row {
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        .line {
          margin: 0 12px;
        }
      }
      .year-area {
        display: block;
        text-align: center;
        margin-top: 4px;
        font-weight: 500;
        font-size: 10px;
        color: #cccccc;
        .link {
          cursor: pointer;
        }
      }
    }
  }
</style>
